<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>svg</title>
  <style>
  *{margin:0;padding:0;}
  body{background:#000;font-family:cursive;color:#fff;}
  header{font-size:100px;text-align:center;}
  .websvg{width:1000px;height:500px;margin:0 auto;text-align:center;border:1px solid #fff;}
  .grid{width:300px;height:460px;position:relative;float:left;margin:20px 15px;}
  .grid svg{position:absolute;top:0;left:0;}
  .grid svg line{stroke-width:4px;/*轮廓厚度*/stroke:yellow;/*触笔颜色*/transition:all 1s;}
  .grid h3{font-size:180px;line-height:370px;font-weight:normal;}
  .grid svg:hover line{stroke-width:14px;}
  .grid svg:hover line.top,.grid svg:hover line.bottom{stroke-dasharray:330px 240px;}
  .grid svg:hover line.left,.grid svg:hover line.right{stroke-dasharray:490px 400px;}
  .grid svg:hover line.top{transform:translateX(-300px);}
  .grid svg:hover line.bottom{transform:translateX(300px);}
  .grid svg:hover line.left{transform:translateY(460px);}
  .grid svg:hover line.right{transform:translateY(-460px);}
  </style>
 </head>
 <body>
  <header>html5</header>
  <div class="websvg">
	<div class="grid">
		<svg width="100%" height="100%">
			<line class="top" x1="0" y1="0" x2="900" y2="0" />/*x1 x轴开始 x2 x轴结束*/
			<line class="left" x1="0" y1="460" x2="0" y2="-920" />
			<line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
			<line class="right" x1="300" y1="0" x2="300" y2="1380" />
		</svg>
		<h3>S</h3>
		<span>我们在一起,一起努力生活！</span>
	</div>
	<div class="grid">
		<svg width="100%" height="100%">
			<line class="top" x1="0" y1="0" x2="900" y2="0" />/*x1 x轴开始 x2 x轴结束*/
			<line class="left" x1="0" y1="460" x2="0" y2="-920" />
			<line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
			<line class="right" x1="300" y1="0" x2="300" y2="1380" />
		</svg>
		<h3>V</h3>
		<span>我们在一起！</span>
	</div>
	<div class="grid">
		<svg width="100%" height="100%">
			<line class="top" x1="0" y1="0" x2="900" y2="0" />/*x1 x轴开始 x2 x轴结束*/
			<line class="left" x1="0" y1="460" x2="0" y2="-920" />
			<line class="bottom" x1="300" y1="460" x2="-600" y2="460" />
			<line class="right" x1="300" y1="0" x2="300" y2="1380" />
		</svg>
		<h3>G</h3>
		<span>一起努力生活！</span>
	</div>
  </div>
 </body>
</html>
